<template>
  <div class="subPage">
    <nav-bar
      :title="navTitle" 
      position="center" 
      color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
      :rowColor="'white'" 
      :goBack="goBack" 
      :isMsg='false' 
      fontColor='#fff' ></nav-bar>
    <div class="videoPlayBox" >
      <!-- mp4  mp3 都可以用video播放 -->
      <video 
        id="myVideo" 
        :src="videoSrc"
        @error="videoErrorCallback" 
        @loadedmetadata="loadSource"
        enable-danmu 
        show-center-play-btn='false' 
        show-play-btn="true" 
        :enable-auto-rotation="type =='video'"
        controls
      ></video>
      <i-icon class="Icon" v-if="type =='audio'" type="customerservice_fill" />
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  data() {
    return {
      navTitle: '健康教育',
      type: "", //资源类型
      videoSrc: "" // 视频地址
    };
  },
  onLoad(options) {
    this.videoSrc = options.src;
    this.type = options.type=='视频'?'video':'audio'
  },
  onShow() {
    wx.showLoading({
      title: "加载中...",
      mask: true
    });
    setTimeout(() => {
      wx.hideLoading();
    }, 30000);
  },
  onUnload() {
    this.videoSrc = ''
  },
  methods: {
    // 视频、音频资源加载
    loadSource() {
      wx.hideLoading();
    },
    // 视频加载出错
    videoErrorCallback() {
      wx.hideLoading();
      wx.showToast({
        title: '加载失败，请重试',
        icon: 'none',
        duration: 1000
      })
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.videoPlayBox {
  flex: 1;
  position: relative;
}
#myVideo {
  height: 100%;
  width: 100%;
}
.Icon {
  color: #fff;
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%) scale(3);
}
</style>
